import React, {Component} from "react";
import {Image, StyleSheet, Text, TouchableOpacity, View, TextInput, TouchableWithoutFeedback} from "react-native";


// 左右图标资源
let left = '../images/scan.png';
let right = '../images/qr_code.png';
let search = '../images/search.png';
let camera = '../images/camera.png';


export default class TitleBar extends Component {
    constructor(props) {
        super(props);
        //外框样式，包括titleBar高度
        this.containerStyle = props.hasOwnProperty('containerStyle') ? this.props.containerStyle : styles.container;
        //背景颜色
        this.bgColor = props.hasOwnProperty('bgColor') ? this.props.bgColor : styles.bgColor;
        //左、右边图标样式
        this.leftStyle = props.hasOwnProperty('leftStyle') ? this.props.leftStyle : styles.leftStyle;
        this.rightStyle = props.hasOwnProperty('rightStyle') ? this.props.rightStyle : styles.rightStyle;
        this.searchStyle = props.hasOwnProperty('searchStyle') ? this.props.searchStyle : styles.searchStyle;
        this.cameraStyle = props.hasOwnProperty('cameraStyle') ? this.props.cameraStyle : styles.cameraStyle;
        //左、右边图标资源(本地可以采用uri，使用drawable中的文件，mipmap的不能使用)
        this.leftSrc = require(left);
        this.rightSrc = require(right);
        this.searchSrc = require(search);
        this.cameraSrc = require(camera);
        //左、右边图标点击事件
        this.onLeftPress = props.hasOwnProperty('onLeftPress') ? this.props.onLeftPress : ()=>{alert("左边图标");};
        this.onRightPress = props.hasOwnProperty('onRightPress') ? this.props.onRightPress : ()=>{alert("右边图标");};
        this.onSearchPress = props.hasOwnProperty('onSearchPress') ? this.props.onSearchPress : ()=>{alert("搜索");};
        this.onCameraPress = props.hasOwnProperty('onCameraPress') ? this.props.onCameraPress : ()=>{alert("拍照");};
        //中间文字样式
        this.textStyle = props.hasOwnProperty('textStyle') ? this.props.textStyle : styles.textStyle;
        //中间文字内容
        this.textContent = props.hasOwnProperty('textContent') ? this.props.textContent : "新的界面";
        //隐藏 none:不隐藏 left:隐藏左边 right:隐藏右边 both:都隐藏
        this.hidden = props.hasOwnProperty('hidden') ? this.props.hidden : 'none';
        this.state = {

        }
    }

    componentDidMount() {
        //这里请求数据
    }

    render() {
        //左右都隐藏
        if (this.hidden === 'both') {
            this.leftSrc = {uri:''};
            this.rightSrc = {uri:''};
            this.onLeftPress = null;
            this.onRightPress = null;
        }
        //隐藏左边
        if (this.hidden === 'left') {
            this.leftSrc = {uri:''};
            this.onLeftPress = null;
        }
        //隐藏右边
        if (this.hidden === 'right') {
            this.rightSrc = {uri:''};
            this.onRightPress = null;
        }
        //全显示
        else {

        }
        return this.bothShow();

    }

    bothShow() {
        return (
            <View style={[this.containerStyle]}>
                <View style={[styles.between,styles.titleCenter]}>
                    <TouchableOpacity
                        style={[styles.leftBtn]}
                        onPress={this.onLeftPress}
                    >
                        <Image
                            style={[this.leftStyle]}
                            source={this.leftSrc}
                        />
                        <Text style={styles.leftTxt}>扫一扫</Text>
                    </TouchableOpacity>

                    <View style={[styles.titleCenter,{flex:1,flexDirection: 'row'}]}>
                        {/*<Text style={this.textStyle} ellipsizeMode={'tail'} numberOfLines={1}>{this.textContent}</Text>*/}
                        <View style={[styles.inputStyle,styles.titleCenter]}>
                            <TouchableWithoutFeedback onPress={this.onSearchPress}>
                                <Image
                                    source={require('../images/search.png')}
                                    style={[{width:22,height:22},]}/>
                            </TouchableWithoutFeedback>

                            <TextInput
                                //style={[styles.input]}
                                style={{flex:1}}
                                returnKeyType={'search'}
                                placeholder={'搜索内容'}
                                autoComplete={'name'}
                                ref={'input'}
                                /*onChange={(result)=>{
                                    this.state.text = result.nativeEvent.text;
                                }}*/
                                onChangeText={this._getValue}
                                /*
                                onKeyPress={(result)=>{
                                    alert(result.nativeEvent.key)
                                }}*/
                                selectionColor={'red'}
                            />
                            <TouchableWithoutFeedback onPress={this.onCameraPress}>
                                <Image source={require('../images/camera.png')} style={[{width:22,height:22},]}/>
                            </TouchableWithoutFeedback>

                        </View>
                    </View>

                    <TouchableOpacity
                        style={[styles.rightBtn]}
                        onPress={this.onRightPress}
                    >
                        <Image
                            style={[this.rightStyle]}
                            source={this.rightSrc}
                        />
                        <Text style={styles.rightTxt}>会员码</Text>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({

    container: {
        height: 50,
        width:Config.deviceWidth,
    },
    bgColor:{
        backgroundColor: '#1296db',
    },
    between: {
        flex: 1,
        flexDirection: 'row',
    },
    leftBtn: {
        marginLeft: 10,
        marginRight: 10,
        justifyContent: 'center',//垂直居中
        alignItems: 'center',
    },
    rightBtn: {
        marginLeft: 10,
        marginRight: 10,
        justifyContent: 'center',//垂直居中
        alignItems: 'center',
    },
    leftStyle: {
        width: 25,
        height: 25,
    },
    leftTxt: {
        fontSize: 12,
        color: 'white',
    },
    rightStyle: {
        width: 25,
        height: 25,
    },
    rightTxt: {
        fontSize: 12,
        color: 'white',
    },
    titleCenter: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    textStyle: {
        //fontWeight:'bold',
        fontSize: 18,
        color: "white",
    },
    input:{
        flex:1,
        height:40,
        marginLeft:5,
        marginRight:5,
        //borderWidth:1,
        borderRadius:50,
        //borderColor:'#ccc',
        paddingLeft:25,
        paddingRight:25,
        backgroundColor: 'white',
        color: 'gray',
    },
    inputStyle: {
        flex:1,
        flexDirection:'row',
        height:40,
        marginHorizontal:5,
        borderRadius:50,
        paddingHorizontal:10,
        backgroundColor: 'white',
        color: 'gray',
    },
    searchStyle:{
        width:22,
        height:22,
    },
    cameraStyle:{
        width:22,
        height:22,
    },
});














